<template>
	<view class="edit">
		<view class="edit-tip">
			密码长度必须 6 至 20 个字符。
		</view>
		<view style="width: 85%;">
			<uni-forms :modelValue="password">
				<uni-forms-item label="新密码: ">
					<uni-easyinput v-model="password.newPasswd" type="password" placeholder="请输入新的密码" maxlength="20" />
				</uni-forms-item>
				<uni-forms-item label="确认密码: ">
					<uni-easyinput class="input" v-model="password.confirmPasswd" type="password" placeholder="请再次输入新密码"
						maxlength="20" @blur="valid" @confirm="valid" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="button-view" style="margin-top: 100upx;">
			<button class="button-single" :disabled="disabledShow" @click="editPasswd(password.newPasswd)">确认</button>
		</view>
	</view>
</template>

<script>
	import editPwd from "../../common/editPwd.js"
	export default {
		data() {
			return {
				password: {
					newPasswd: '',
					confirmPasswd: ''
				},
				disabledShow: true,
			}
		},
		methods: {
			valid(e) {
				let val = e.detail.value
				
				if (val != null && val != "" && this.password.newPasswd != val) {
					api.showTip("两次输入的密码不一致,请重新输入", 2000)
				}
			},
			editPasswd(password) {
				if(!/^[a-zA-Z0-9]{6,20}$/.test(val)){
					api.showTip("输入的密码不满足要求");
					return;
				}
				this.disabledShow = true;
				
				editPwd.doEditPwd({userId: editPwd.getUserInfo().id, userPwd: pthis.password.newPasswd}).then(result=>{
					if(result.code == 0){
						uni.reLaunch({
							url: '../login/login',
						})
					}
				})
			}
		},
		watch: {
			password: {
				handler(newVal, oldVal) {
					if ((newVal.newPasswd !== '') && (newVal.confirmPasswd !== '') && (newVal.newPasswd === newVal
							.confirmPasswd)) {
						this.disabledShow = false
					} else {
						this.disabledShow = true
					}
				},
				deep: true
			}
		}
	}
</script>

<style>
	.edit {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.edit-tip {
		width: 640upx;
		padding: 20upx 0upx;
		line-height: 60upx;
		color: #FF3333;
	}

	.button-view {
		width: 100%;
		padding: 7px 0px
	}

	.button-single {
		width: 80%;
		border-radius: 7px;
		background-color: #0099ff;
		color: #fff;
	}
</style>
